<script setup>
import { reactive } from "vue";
import axios from "axios";
import { nanoid } from "nanoid";
import { useLoveTalkStore } from "@/store/love-talk.js";
import { storeToRefs } from "pinia";
const loveTalkStore = useLoveTalkStore();

// 1:注意只要是store身上都有一个$subscribe()方法，可以用来监听state的变化
//里面有两个参数，第一个参数是布尔值，表示是否是第一次调用，第二个参数是state对象
// 2:注意，只要state发生变化，$subscribe()方法就会被调用,类似于vue中的watch监视器
loveTalkStore.$subscribe((mutate, state) => {
  // console.log(mutate); // {type:"patch",payload:{talkList:[...]}}
  // console.log(state); //state就是store中的state
  localStorage.setItem("loveTalkList", JSON.stringify(state.talkList));
});

// 使用storeToRefs解构出talkList，以免丢失响应式
const { talkList } = storeToRefs(loveTalkStore);

function getLoveMessage() {
  // axios({
  //   method: "get",
  //   url: "https://api.uomg.com/api/rand.qinghua?format=json",
  // })
  //   .then((res) => {
  //     //请求回来的数据，包装成我们想要的对象
  //     //{"code":1,"content":"“我重要吗？”“再重都要”"}

  //     let obj = { id: nanoid(), text: res.data.content };
  //     loveTalkStore.talkList.unshift(obj); //unshift()方法，将数据添加到数组的最前面
  //   })
  //   .catch((error) => {
  //     console.log(error);
  //   });
  loveTalkStore.getLoveTalk();
}
</script>
<template>
  <div class="love-talk">
    <el-button type="primary" @click="getLoveMessage"
      >获取一句土味情话</el-button
    >
    <ul>
      <li v-for="item in talkList" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.love-talk {
  background-color: rgb(15, 212, 71);
  padding: 10px;
}
</style>